<template>
  <div class="chat-message">
    <div class="user-info">
      <template v-if="type === RoleType.ASSIST">
        <img class="avatar" src="@/assets/imgs/bot.png" alt="头像" />
      </template>
      <template v-else>
        <img
          class="avatar round"
          :src="basicStore.getHeader?.image || userStore.avatar"
          alt="头像"
        />
      </template>
    </div>
    <div
      class="message-wrap writing"
      :class="{ writing, active: type === RoleType.ASSIST }"
      :style="{ paddingBottom: type == RoleType.ASSIST ? '' : '0' }"
    >
      <div class="name">
        {{ type === RoleType.ASSIST ? 'AI 助手' : userStore.alias }}
      </div>
      <!-- <div class="message-content markdown-content" v-html="message" /> -->
      <MarkdownRenderer v-if="message" class="message-content" :content="message" />
      <div class="mess-bottom-questions" v-show="type === RoleType.ASSIST && !props.writing">
        <div v-for="(item, index) in props.issueData" :key="item" class="mess-bottom-questions-val">
          <div class="cursor" @click="otherCommon(item)">{{ item }}</div>
          <div class="cursor" v-if="index == props.issueData.length - 1" @click="goExpert">
            申请专家人工服务
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { watch, ref, computed } from 'vue'
// import { useUserInfo } from '@/stores/user'
// import { Apis } from '@/composables/useHttp'
import { usePermissionStoreWithOut } from '@/store/modules/permission'
import { useBasicStoreWithOut } from '@/store/modules/basic'
const emits = defineEmits(['question'])
import MarkdownRenderer from './MarkdownRenderer.vue'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const permissionStore = usePermissionStoreWithOut()
const basicStore = useBasicStoreWithOut()
const userStore = computed(() => permissionStore.getUserInfo)

const RoleType = {
  USER: 'user',
  ASSIST: 'assist'
}

const props = defineProps({
  message: String,
  type: String,
  writing: Boolean,
  issueData: Array,
  loading: Boolean
})
const otherCommon = (item) => {
  if (!props.loading) {
    console.log('123')
    emits('question', item)
  }
}
// watch(
//   () => props.issueData,
//   (newValue, oldValue) => {
//     console.log("newValue, oldValue", newValue, oldValue);
//   }
// );
async function goExpert() {
  // route.meta.activeMenu = "financialStatementAnalysis";
  router.push('/expert')
}
</script>

<style lang="less" scoped>
.chat-message {
  margin-bottom: 28px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  user-select: text;
  &:last-child {
    margin-bottom: 0;
  }
  .user-info {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
    margin-right: 10px;
    .avatar {
      height: 28px;
      margin-right: 6px;
      &.round {
        width: 28px;
        border-radius: 50%;
        overflow: hidden;
        background-color: #101737;
      }
    }
    .name {
      font-size: 12px;
      font-weight: 400;
      line-height: 14.52px;
    }
  }
  .message-wrap {
    position: relative;
    border-radius: 6px;
    border: 1px solid #d3e4eb;
    background: #fff;
    box-shadow: 0px 1px 18px 1px rgba(203, 203, 203, 0.3);
    padding: 9px 12px 21px 12px;
    box-sizing: border-box;
    width: calc(100% - 45px);
    .name {
      color: #646464;
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 10px;
    }
    .message-content {
      color: #1b0303;
      font-size: 14px;
      font-weight: 400;
      width: 100%;
      overflow: hidden;
    }
    .mess-bottom-questions {
      width: 100%;
      .mess-bottom-questions-val {
        margin-top: 18px;
        display: flex;
        justify-content: space-between;
        color: #00a2d9;
        font-size: 14px;
        font-weight: 400;
      }
    }
  }
  .active {
    // border-radius: 6px;
    // border: 1px solid #d3e4eb;
    // background: linear-gradient(90deg, #dfe6fe 47.5%, #dbf2ff 100%);
    // box-shadow: 0px 1px 18px 1px #8bb3ef;
    border-radius: 3px;
    border: 1px solid #d3e4eb;
    background: #f3f5fa;
    box-shadow: 0px 1px 18px 1px rgba(203, 203, 203, 0.3);
  }

  .message-wrap.writing {
    .message-content::after {
      content: '';
      display: inline-block;
      width: 2px;
      height: 1em;
      background-color: #fff;
      margin-right: 0.2em;
      transform: translateY(0.15em);
      animation: flicker 1s ease-in-out infinite;
    }
  }
}
@keyframes flicker {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
</style>
